<template>
	<div class="ipcurrent">
		<head-top :head-title="res_info.subject_name" go-back="true" v-if="showHead"></head-top>
		<div class="svg-div goback" @click="$router.go(-1)">
			<svg class="icon-svg">
				<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#goback"></use>
			</svg>
		</div>
		<div class="svg-div share">
			<svg class="icon-svg">
				<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#share"></use>
			</svg>
		</div>
		<div class="header" id="header">
			<div class="spec">
				<div class="img">
					<img :src="res_info.pic && imgBaseUrl + res_info.pic"/>
				</div>
			</div>
			<div class="name">
				{{res_info.subject_name}}
			</div>
			<div class="num">
				{{`${res_info.total}视频`}}
			</div>
			<!-- <div class="desc">
				{{res_info.desc !=''?res_info.desc:'这个人很懒，什么都没有留下...'}}
			</div> -->
			<div class="subs">
				<div class="subs-btn" v-if="res_info.store==0" @click="utilFollow(res_info)">
					+订阅
				</div>
				<div class="subs-txt" v-else>
					<div class="svg-div">
						<svg class="icon-svg">
							<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#subs"></use>
						</svg>
					</div>
					已订阅
				</div>
			</div>
		</div>
		<dataLR v-on:child-say="listenToMyBoy"></dataLR>
	</div>
</template>

<script>
	import {Toast} from 'mint-ui'
	import headTop from '@/components/header/head'
	import { IPGetarticlelist, subscriptionAdd, imgBaseUrl } from '@/api'
	import dataLR from '@/components/dataLR/dataLR.vue'
	import { mapState, mapMutations } from 'vuex'
	export default {
		data () {
			return {
				imgBaseUrl,
				res_info: {},
				showHead: false,
				showHeadRepeatReuqest: false, //到达底部加载数据，防止重复加载
			}
		},
		mounted(){
			let headHeight = document.getElementById('header').clientHeight;
			window.onscroll = () => {
				this.showHeadRepeatReuqest = true;
				let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
				scrollTop>=headHeight?this.showHead=true:this.showHead=false;
				this.showHeadRepeatReuqest = false;
			}
		},
		components: {
			headTop,
			dataLR,
		},
		computed: {
			...mapState([
				'userInfo',
			]),
		},
		methods: {
			...mapMutations([
				'DIALOG_LOGIN',
			]),
			/**
			 * 订阅
			 */
			utilFollow(item){
				// /subscription/subscriptionfront/add?obj_id=1&type=2&user_id=12
				if(this.userInfo && this.userInfo.user_id){
					let para = {
						obj_id: item.subject_id,
						type: 2,
						user_id: this.userInfo.user_id,
						title: item.subject_name,
					}
					subscriptionAdd(para).then( res => {
						if(res.data){
							this.res_info.store = 1;
						}else{
							if(res.tologin){
								this.DIALOG_LOGIN();
								this.$router.push('/login');
							}else {
								if(res.msg === '您已经订阅过'){
									this.res_info.store = 1;
								}
								Toast(res.msg);
							}
						}
					})
				}else{
					this.DIALOG_LOGIN();
					this.$router.push('/login');
				}
			},
			listenToMyBoy: function (somedata){
				this.res_info = somedata
			},
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
	.ipcurrent {
		position: relative;
		.goback {
			width: 1.95rem;
			height: 1.95rem;
			position: absolute;
			top: 0;
			left: 0;
		}
		.share {
			width: 1.95rem;
			height: 1.95rem;
			position: absolute;
			top: 0;
			right: 0;
		}
	}
	.ipcurrent>.svg-div {
		.icon-svg {
			margin-top: 25%;
			margin-left: 25%;
			width: 50%; 
			height: 50%;
		}
	}
	.header {
		margin: 0rem 0.4rem;
		padding: 1rem 0;
		height: 10rem;
		font-size: 0.5em;
		border-bottom: 1px solid #ccc;

		.avatar {
			width: 2.5rem;
			height: 2.5rem;
			margin: 0 auto;
			border-radius: 50%;
			overflow: hidden;
			.icon-svg {
				width: 100%;
				height: 100%;
			}
		}
		.spec {
			position: relative;
			width: 50%;
			height: 0;
			padding-bottom: calc(56.25%/2);
			overflow: hidden;
			margin: 0 auto;
		}
		.name {
			text-align:center;
			margin: 0.5rem 0;
			font-weight: bold;
			font-size: 0.6rem;
		}
		.num {
			text-align: center;
			margin: 0.5rem 0;
		}
		.desc {
			width: 80%;
			text-indent: 2em;
			margin: 0.5rem auto;
		}
		.subs-btn {
			margin-top: 0.3rem;
			width: 2.5rem;
			height: 1.1rem;
			line-height: 1rem;
			border: 1px solid #ccc;
			border-radius: 0.2rem;
			text-align: center;
			margin: 0 auto;
		}
		.subs-txt {
			width: 2.5rem;
			margin: 0 auto;
		}
		.svg-div {
			display: inline-block;
			width: 0.7rem; 
			height: 0.7rem;
			vertical-align: -.125rem; 
		}
		.icon-svg {
			fill: #f86254;
			width: 0.7rem; 
			height: 0.7rem;
		}
	}
</style>